<template>
    <div class="device-tree-list">
      <!-- 搜索栏 -->
      <SearchFilters @search="onSearch" />
  
      <!-- 树形设备表格 -->
      <el-table
        :data="treeRows"
        row-key="id"
        border
        default-expand-all
        v-loading="loading"
        :tree-props="{ children: 'children' }"
        style="margin-top: 12px"
      >
        <!-- 展开行：备件 -->
        <el-table-column type="expand">
          <template #default="{ row }">
            <el-table
              v-if="row.spareInfos?.length"
              :data="row.spareInfos"
              border
              size="small"
              style="margin-left: 40px"
            >
              <el-table-column prop="name" label="备件名称" />
              <el-table-column prop="code" label="编码" width="120" />
              <el-table-column prop="stockAvailable" label="可用库存" width="100" />
              <el-table-column prop="stockTotal" label="总库存" width="100" />
              <el-table-column label="操作" width="100">
                <template #default="{ row: spare }">
                  <el-button type="primary" link @click="onEditSpare(spare)">
                    修改
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-else class="ml40 text-gray-500">暂无备件</div>
          </template>
        </el-table-column>
  
        <!-- 主列：设备信息 -->
        <el-table-column prop="name" label="设备名称" min-width="200" />
        <el-table-column prop="code" label="编码" width="140" />
        <el-table-column prop="beType" label="类别" width="100" />
        <el-table-column prop="area" label="区域" width="100" />
        <el-table-column prop="model" label="型号" width="120" />
        <el-table-column prop="brand" label="品牌" width="120" />
  
        <!-- 操作 -->
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="onEditDevice(row)">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import SearchFilters from './SearchFilters.vue'
  import { listSbtz } from '@/api/sbtz/sbtz'
  
  const loading = ref(false)
  const treeRows = ref([])
  
  /**
   * 点击搜索或页面初始化时加载设备树
   */
  async function onSearch(params = {}) {
    loading.value = true
    const { rows = [] } = await listSbtz({
      ...params,
      pageNum: 1,
      pageSize: 1000
    })
  
    // 过滤掉 SYSTEM 层
    const devices = rows.filter(r => r.nodeType !== 'SYSTEM')
  
    // 模拟：每个设备挂一些备件数据
    devices.forEach(r => {
      r.spareInfos = [
        { name: '传感器', code: 'SP001', stockAvailable: 12, stockTotal: 20 },
        { name: '电机', code: 'SP002', stockAvailable: 5, stockTotal: 10 }
      ]
    })
  
    // 构建父子层级结构
    const map = new Map()
    devices.forEach(d => map.set(d.id, { ...d, children: [] }))
    const roots = []
    devices.forEach(d => {
      const pid = d.parentId
      if (!pid || !map.has(pid)) roots.push(map.get(d.id))
      else map.get(pid).children.push(map.get(d.id))
    })
  
    treeRows.value = roots
    loading.value = false
  }
  
  function onEditDevice(row) {
    console.log('编辑设备', row)
    // 这里可打开设备编辑弹窗
  }
  
  function onEditSpare(spare) {
    console.log('编辑备件', spare)
    // 这里可打开备件编辑弹窗
  }
  
  // 初始化加载
  onMounted(() => onSearch())
  </script>
  